<template>
	<view>
		<van-search class="search" v-model="keyword" @search="onSearch" shape="round" placeholder="请输入搜索关键词" />
		<view class="box">
			<view class="tabbox">
				<!-- <van-dropdown-menu>
					<van-dropdown-item :value="dropdownValue" :options="dropdownOption" />
				</van-dropdown-menu> -->
				<view class="liaol" @tap="tabboxCiks('normal')" :class="sales == 'normal' ? 'weight' : ''">综合推荐
				</view>
				<view class="liaol" @tap="tabboxCiks('sales')" :class="sales == 'sales' ? 'weight' : ''">销量</view>
				<view class="jiag" @tap="tabboxCiks(sales == 'price_d' ? 'price_a' : 'price_d')"
					:class="sales == 'price_d' || sales == 'price_a' ? 'weight' : ''">
					<view>价格</view>
					<view class="updown">
						<van-icon size="8" name="arrow-up" :color="sales == 'price_a' ? '#333333' : '#999999'" />
						<van-icon size="8" name="arrow-down" :color="sales == 'price_d' ? '#333333' : '#999999'" />
					</view>
				</view>
			</view>
			<view class="content">
				<view class="item" v-for="item in productList"
					@click="navTo(`/long/productDetail/productDetail?id=${item.id}`)">
					<image class="img" :src="baseUrl + item.images" mode="aspectFill"></image>
					<view class="textbox">
						<view class="title">{{ item.title }}</view>
						<view class="jiage" v-if="item.vip_price > 0 || item.market_price > 0">会员价:
							<text class="vipPrice">¥{{ item.vip_price }}</text>
							<text class="price">¥{{ item.market_price }}</text>
						</view>
						<view class="jiage" v-else>
							<text class="vipPrice" style="font-size: 26rpx;">验证后可查看产品价格</text>
						</view>
						<view class="yishou">已售{{ item.sales || 0 }}份</view>
					</view>
				</view>
			</view>
			<van-empty description="暫无数据" v-if="productList.length == 0" />

		</view>
	</view>
</template>

<script>
import { getSearch } from "@/api/api.js"
import baseUrl from "@/api/baseUrl";
export default {
	data() {
		return {
			baseUrl,
			dropdownOption: [{
				text: "综合推荐",
				value: 1
			}, {
				text: "七天无理由",
				value: 2
			}, {
				text: "退货包运费",
				value: 3
			},
			{
				text: "极速退款",
				value: 4
			}
			],
			productList: [],
			keyword: '',
			page: 1,
			limit: 50,
			sales: 'normal'
		}
	},
	onLoad(options) {
		this.keyword = options.searchValue
		uni.setNavigationBarTitle({
			title: options.searchValue
		});
		this.serve()
	},
	methods: {
		tabboxCiks(e) {
			this.sales = e
			this.serve();
		},
		navTo(url) {
			uni.navigateTo({
				url
			})
		},
		onSearch(e) {
			this.keyword = e.detail
			this.serve()
		},
		serve() {
			getSearch({
				keyword: this.keyword
			}).then(res => {
				if (res.code == 1) {
					this.productList = res.data
					console.log(this.productList)
				}
			})
		}
	}
}
</script>

<style lang="scss">
.weight {
	font-weight: bold !important;
}

.search {
	width: 100%;
}

.box {
	.tabbox {
		padding: 20rpx 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}

	.van-dropdown-menu {
		background-color: transparent;
		box-shadow: none;
		color: #333333;
		font-size: 28rpx;
	}

	.van-dropdown-menu__title {
		padding: var(--dropdown-menu-title-padding, 0 24px 0 0);
	}

	.liaol {
		font-size: 26rpx;
		color: #5C5C5C;
		// margin-left: -85rpx;
		width: 110rpx;
	}

	.jiag {
		font-size: 26rpx;
		color: #5C5C5C;
		display: flex;
		align-items: center;
		column-gap: 8rpx;

		.updown {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}
}

.content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 20rpx;
	background: #F8F7F7;
	padding: 20rpx;
	flex-wrap: wrap;
	row-gap: 20rpx;

	.item {
		display: flex;
		flex-direction: column;
		width: 48%;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;

		.img {
			width: 345upx;
			height: 398upx;
		}

		.textbox {
			padding: 15rpx 20rpx;
			display: flex;
			flex-direction: column;
			row-gap: 10rpx;

			.title {
				font-size: 28rpx;
				color: #333333;
			}

			.jiage {
				color: #FF6200;
				font-size: 22rpx;

				.vipPrice {
					font-size: 28rpx;
					margin-right: 10rpx;
				}

				.price {
					color: #A2A2A2;
				}
			}

			.yishou {
				font-size: 22rpx;
				color: #CCCCCC;
			}
		}
	}
}
</style>
